import React from "react"
import { inject, observer } from "mobx-react"
import { AuthorityHeader } from "../header"
import { AntdButton, Captcha } from "../../../components"
import { Tip } from "../tip"
import "./register.scss"
import { Input } from "../../../components/input"
import { images } from "../../../assets"

interface IRegisterProps {
  rootStore?: any
}

@inject("rootStore")
@observer
export class Register extends React.Component<IRegisterProps, {}> {
  render() {
    const { loginStore } = this.props.rootStore
    return (
      <div className="register">
        {AuthorityHeader({
          title: "忘记密码",
          isRegister: true,
          firstTitle: "用户名注册",
          secondTitle: "手机快捷注册"
        })}
        <Tip title="注册即代表阅读并同意使用条款" />
        {loginStore.registerStep === 0 ? (
          <div className="register-content">
            <Input
              leftIcon={images.login.icons.logInUser}
              placeholder="输入6~16个字母及数字组合"
              isOpenClear={loginStore.usernameOpenClear}
              clear={loginStore.usernameClear}
              value={loginStore.username}
              onChange={(e: any) => loginStore.usernameOnChange(e.target.value)}
            />
            <Input
              isPassword
              leftIcon={images.login.icons.password}
              placeholder="输入8~20个字母及数字组成的密码"
              isOpenClear={loginStore.passwordOpenClear}
              value={loginStore.password}
              clear={loginStore.passwordClear}
              onChange={(e: any) => loginStore.passwordOnChange(e.target.value)}
              isPasswordOpen={loginStore.isPasswordOpen}
              changePasswordStyle={loginStore.changePasswordStyle}
            />

            <AntdButton type="primary" className="register-btn" onClick={loginStore.captchaShow}>
              确定
            </AntdButton>

            <Captcha
              showCaptcha={loginStore.showCaptcha}
              captchaClose={loginStore.captchaClose}
              callback={(err: any, data: any) => loginStore.registerCallback(err, data)}
            />
          </div>
        ) : (
          <div className="register-content">
            <div className="register-avatar">
              <img
                alt=""
                className="avatar"
                src="https://www.okzpps.com/09a8095b64c7e8dcb6b9353c8ece73a8.png"
              />
              <div className="avatar-tip">选择完善头像</div>
              <div className="avatar-name">昵称</div>
              <div className="user-content">
                <input placeholder="给自己起个响亮的名字" className="user-name" />
              </div>
            </div>

            <AntdButton type="primary" className="register-btn" onClick={loginStore.captchaShow}>
              确定
            </AntdButton>
          </div>
        )}
      </div>
    )
  }
}
